<template>
  <div>
    <header>
      <van-icon name="arrow-left" size="30px" @click="goBack" />
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索你喜欢的鱼"
          @search="onSearch"
          @cancel="onCancel"
          @input="input"
        />
      </form>
    </header>

    <div class="history">
      <div class="history-top">
        <span>历史搜索</span>
        <van-icon name="clear" @click="del" />
      </div>
      <div class="history-button">
        <span v-for="item in history" :key="item.id">{{ item }}</span>
      </div>
    </div>

    <div class="mohu">
        <ul>
  <li v-for="(item,i) in matchingList" :key="i" @click="upData(item)">{{item.title}}</li>
        </ul>
    </div>










  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      value: "",
      history: ["酸菜鱼", "鱼香肉丝"],
       //匹配到的数据
      matchingList:[],
      goods:[]
    };
  },
  created() {
    console.log(this.$store.state.goods);

     this.$axios({
      url: "goods.json",
      method: "get",
    }).then((res) => {
      this.goods = res.data.goods
      console.log(this.goods);
      
    });


    // 获取vuex中的历史记录
    if (localStorage.token) {
      this.history = localStorage.token.split(",") || [];
    }
  },
  methods: {
    // 点击搜索
    onSearch(val) {
      this.history.push(val);

     this.$router.push({
        path:"/Home",
        query:{
            val
        }
      })


      // 如果数量大于3就删除一个
      if (this.history.length > 3) {
        this.history.splice(0, 1);
      }
      // 使用vuex数据持久化
      // this.$store.commit('changeHistory',val)
      // 把历史记录从新给token赋值
      localStorage.token = this.history;
    },
    onCancel() {
      console.log("取消");
    },
    goBack() {
      this.$router.back();
    },
    del() {
      console.log(777);
      this.history = "";
      // this.$store.commit('delhistroy',)
    },
    input() {
        this.matchingList = []
        this.goods.forEach(item => {
          if(item.title.includes(this.value)){
            this.matchingList.push(item)
          }
        });
    },
    // 点击推荐的li去搜索
    upData(item) {
      console.log(item.title);
      this.value = item.title
      this.$router.push({
        path:"/Home",
        query:{
            item
        }
      })
      

    }
  },
  //组件挂载
  components: {},
  //计算属性
  computed: {},
  //过滤器
  filters: {},
};
</script>

<style lang="scss" scoped>
/deep/ {
  header {
    display: flex;
    align-items: center;
    .van-search {
      width: 340px;
    }
  }
  .history {
    width: 100%;
    height: 100px;
    padding: 0 10px;
    .history-top {
      height: 40px;
      display: flex;
      justify-content: space-between;
      span {
        font-weight: 700;
        font-size: 20px;
      }
    }
    .history-button {
      width: 100%;
      height: 50px;
      span {
        background-color: darkgrey;
        padding: 6px;
        margin: 6px;
      }
    }
  }
}
.mohu{
  width: 100%;
  ul{
    width: 100%;
    padding:  0 45px;
    background-color: #eee;
    position: absolute;
    top: 46px;
    left: 0;
    li{
      line-height: 50px;
      border-bottom: 1px solid #eee;
    }
  }
}
</style>
